<template>
  <div class="app">
    <div class="alert alert-error shadow-lg" style="width: 100%;" v-show="flag">
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none"
          viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>用户名或密码错误</span>
      </div>
    </div>
    <!-- 左边 -->
    <div class="left">
      <!-- 标题框 -->
      <div class="title">
        Admin Login ✨
      </div>
      <!-- 表单内容框 -->
      <div class="body">
        <div class="card-body">
          <div class="form-control">
            <label class="label">
              <span class="label-text">Email</span>
            </label>
            <input type="text" placeholder="email" class="input input-bordered" v-model="email" />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Password</span>
            </label>
            <input type="text" placeholder="password" class="input input-bordered" v-model="pass" />
            <label class="label" style="margin-top: 30px;">
              <a href="#" class="label-text-alt link link-hover">Forgot password?</a>
            </label>
          </div>
          <div class="form-control mt-6" style="margin-top: -48px;margin-left:380px">
            <button class="btn btn-primary" @click="login">Sign In</button>
          </div>
        </div>
      </div>

      <div class="alert alert-info" style="width: 400px;margin-left:120px;margin-top:100px">
        <div>
          <span>This is hyperledger fabric shopping admin.</span>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right">
      <img src="../assets/login.jpg" style="width: 100%; height: auto;">
    </div>

    <div class="auth">
      <img src="../assets/auth-decoration.png" style="width: 10%; height: auto; position: absolute;top:200px;left:610px">
    </div>
  </div>
</template>


<script>
export default {
  name: 'login',
  data() {
    return {
      email: '',
      pass: '',
      flag: false
    }
  },
  methods: {
    //发送请求实现登陆
    login() {
      //对用户名和密码进行长度限制
      if (this.email.length < 1 || this.pass.length < 1) {
        this.flag = true
        //我想要设计三分钟后自动将flag设为false
        setTimeout(() => {
          this.flag = false
        }, 3000)
        return
      }
      this.$http.post('/admin/Login', {
        email: this.email,
        pass: this.pass
      }).then(res => {
        if (res.data.code == 200) {
          //设置token
          localStorage.setItem('admin_token', res.data.token)
          localStorage.setItem('admin_email', res.data.email)
          this.$router.push('/index').catch(err => { })
        } else {
          this.flag = true
          //我想要设计三分钟后自动将flag设为false
          setTimeout(() => {
            this.flag = false
          }, 3000)
          return
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

.left {
  width: 50%;
  float: left;
  height: 100vh;
}

.title {
  font-weight: bolder;
  font-size: 32px;
  text-align: center;
  margin-top: 180px;
}

.body {
  margin: auto;
  display: block;
}

.body .form-control {
  display: block;
  margin: auto;
}

.body .form-control input {
  width: 400px;
}

.right {
  width: 50%;
  float: right;
  height: 100vh;
  overflow: hidden;
}
</style>
